<template>
    
  <div class="shortcut">
    <a href="/home" class="home-btn">首页</a>
  <div class="wrapper">
        <div class="header">
            <div class="top-nav">
                <div class="top">
                    <div class="area">
                        <a href="#">长沙市</a>
                       <i></i>
                        
                    </div>
                    <div class="select">
                        <ul>
                            <li :class="{ 'login': !userName, 'user-info': userName }">
                  <span v-if="!userName" class="lg"><a href="#/login">请登录</a></span>
                  <span v-if="!userName"><a href="#/reg"> 注册</a></span>
                  <span v-else class="user-name"><a href="#/grxx">当前用户：{{ userName }}</a></span>
                            </li>     
                            <li class="tm">
                                <span v-if="!userName"><a href="#"></a></span>
                  <span v-else  @click="logout" class="user-name"><a href="#">退出用户</a></span>
                            </li>   
                            <li>
                                <span>
                                    <div class="svg">
                                    <a><svg t="1749604559547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5830" width="20" height="20"><path d="M851.7632 300.5952H186.2656c-37.0176 0-67.0208 30.0032-67.0208 67.0208v74.0864c0 37.0176 30.0032 67.0208 67.0208 67.0208h6.5024v283.5456c0 58.5728 47.4624 106.0352 106.0352 106.0352h440.4224c58.5728 0 106.0352-47.4624 106.0352-106.0352v-283.648h6.5024c37.0176 0 67.0208-30.0032 67.0208-67.0208V367.5648c-0.0512-37.0176-30.0544-66.9696-67.0208-66.9696z" fill="#FF5F5F" p-id="5831"></path><path d="M851.7632 285.2352h-90.88l12.5952-12.8c17.92-18.2272 27.2896-42.2912 26.368-67.84-0.9216-25.5488-12.032-48.896-31.1808-65.7408-36.1472-31.744-91.2384-30.1056-125.3888 3.7888L525.312 259.584 407.3472 142.6432c-34.1504-33.8944-89.2416-35.5328-125.3888-3.7888-19.2 16.8448-30.2592 40.192-31.1808 65.7408-0.9216 25.5488 8.448 49.6128 26.368 67.84l12.5952 12.8h-103.424c-45.4144 0-82.3808 36.9664-82.3808 82.3808v74.0864c0 42.3936 32.256 77.4144 73.5232 81.8688v268.6976c0 66.9184 54.4256 121.3952 121.3952 121.3952h440.4224c66.9184 0 121.3952-54.4256 121.3952-121.3952v-268.6976c41.2672-4.4544 73.5232-39.424 73.5232-81.8688V367.5648c-0.1024-45.4144-37.0176-82.3296-82.432-82.3296z m-186.9312-120.7808c22.7328-22.528 59.392-23.6544 83.5072-2.5088 12.8 11.2128 20.1728 26.7776 20.7872 43.776 0.6144 16.9984-5.632 33.024-17.5616 45.1584l-33.792 34.3552h-174.6944l121.7536-120.7808zM299.008 250.88c-11.9296-12.1344-18.176-28.16-17.5616-45.1584 0.6144-16.9984 7.9872-32.5632 20.7872-43.776 24.064-21.1456 60.7744-20.0192 83.5072 2.5088L507.4944 285.184H332.8L299.008 250.88z m530.8928 541.2864c0 49.9712-40.6528 90.6752-90.6752 90.6752H298.8032c-49.9712 0-90.6752-40.6528-90.6752-90.6752v-268.1856h621.7728v268.1856z m73.472-350.5152c0 28.4672-23.1424 51.6096-51.6608 51.6096H186.2656c-28.4672 0-51.6608-23.1424-51.6608-51.6096V367.5648c0-28.4672 23.1424-51.6608 51.6608-51.6608h665.4976c28.4672 0 51.6608 23.1424 51.6608 51.6608v74.0864z" fill="#424242" p-id="5832"></path><path d="M529.2032 862.3104c-8.4992 0-15.36-6.8608-15.36-15.36V352.4096c0-8.4992 6.8608-15.36 15.36-15.36s15.36 6.8608 15.36 15.36v494.5408c0 8.448-6.912 15.36-15.36 15.36z" fill="#FFFFFF" p-id="5833"></path></svg>
                                        签到有礼</a>
                                        </div>
                                </span>
                            </li>                    
                            <li>
                                <span><a href="#/goods">我的订单</a></span>
                            </li> 
                            <li class="tm">
                                <span class="xsj"><a href="#">我的特卖</a>
                                    <i></i>
                                </span>
                            </li>
                            <li class="kf">
                                <span class="xsj"><a href="#">客户服务</a>
                                    <i></i>
                                </span>
                            </li>
                            <li>
                                <span class="phone">
                                    <img src="../../assets/images/sj.jpg" alt="">
                                    <a href="#">手机版</a>
                                </span>
                            </li>
                            <li class="more">
                                <span class="xsj"><a href="#">更多</a>
                                    <i></i>
                                </span>
                              
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            </div>
            </div>
          
          </div>
</template>

<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const userName = ref(sessionStorage.getItem('userName') || '');
 
    const logout = () => {
      sessionStorage.removeItem('userName');
      sessionStorage.removeItem('userId');
      userName.value = ''; // 更新 userName 的值以反映登出状态
      userId.value='';
    };
 
    return {
      userName,
      logout,
    };
  },
};
</script>

<style scoped>
 .home-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 14px;
            font-weight: bold;
        }
.svg{
    display: flex;
    flex-direction: column;
}
*{
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;       
}
html,body{
    width: 100%;
    height: 100%;
}
.wrapper{
    width: 100%;
    height: 100%;
}
.wrapper .header{
    width: 100%;
    height: auto;
}
/* top-nav部分 */
.header .top-nav{
    width: 100%;
    height: 28px;
    background-color: #f5f5f5;
}
.header .top-nav .top{
    width: 1000px;
    height: 28px;
    margin: 0 auto;
}
.header .top .area{
   width: 80px;
   padding-left: 15px;
   padding-right: 23px;
   position: relative;
   float: left;
 }
.header .top .area a{
    line-height: 28px;
    font-size: 12px;
    color: #333;
}
.header .top .area i,
.header .top .select  span.xsj i
{
    display: inline-block;
    border: 4px solid transparent;
    border-top-color: #999;
    position: absolute;
    right: 10px;
    top: 11px;   
}
.header .top .select{
    float:right;
}
.header .top .select ul li{
    float: left;
    line-height: 28px;
    padding-right: 20px;
    padding-left: 13px; 
    position: relative;  
}
.header .top .select ul span:hover a{
    color:#fa2a83;
}
.header .top .select ul .tm,
.header .top .select ul .jlb,
.header .top .select ul .kf{
    padding-right: 30px;
}
.header .top .select ul li::after,
.header .top .select .login span.lg::after
{
    content: '/';
    color: #ccc;
    width: 16px;
    height: 16px;
    position: absolute;
    top:1px;
    right: -10px;
}
.header .top .select li a {
    font-size: 13px;
    color: #666;
}
.header .top .select .login span.lg{
    text-align: left;
    margin-right: 25px;
    position: relative;
}
.header .top .select .login span.lg::after
{
    right: -30px;
    top: -2px; 
}
.header .top .select  span.xsj {
    position: relative;
}
.header .top .select span.xsj i{
    right: -12px;
    top: 10px; 
}
.header .top .select li.more::after{
    content: '';
}
.header .top .select span.phone img{
    width: 11px;
    height: 15px;
    vertical-align: middle;
}





/* head-search部分 */
.header .head-search{
    width: 100%;
    height: 120px;
}
.header .head-inner{
    width: 1000px;
    height: 100px;
    padding-top: 20px;
    margin: 0 auto;
}
.header .head-inner .logo{
    width: 140px;
    height: 100px;
    position: relative;
    float: left;
}
.header .head-inner .logo .img-box{
    position: absolute;
    top:0;
    left: -20px;
    width: 160px;
    height: 100px;
}
.header .head-inner .logo .img-box img{
    width: 160px;
    height: 100px;
}
.head-search .search{
    float: left;
    width: 304px;
    height: 100px;
}
.head-search .service{
    float: left;
}
.head-search .service li{
    float: left;
    width: 101px;  
    height: 100px;
}
.head-search .service li a{
    font-size: 12px;
    color: #333;
    line-height: 100px;
    font-weight: 500;
}
.head-search .service li span{
    width: 25px;
    height: 25px;
    display:inline-block; 
    position: relative;
    left: 2px;
    top: 5px;
}
.head-search .service li span img{
    width: 26px;
    height: 25px;
}


.head-search .shop-box{
    width: 96px;
   /* height:32px; */
    margin-top: 33px;
    margin-left:15px;
    float: right;
}
.head-search .shop-box .shop-wrap{
    width: 36px;
    padding-left: 25px;
    padding-right: 33px;
    height: 32px;
    line-height: 32px;
    background-color: #f6f7f9;
    position: relative;
    border:1px solid #ccc;
    border-radius: 2px;
    position: relative;

}
.head-search .shop-box .shop-wrap a{
    font-size: 12px;
    color:#333;
}
.head-search .shop-box .shop-wrap .gwd{
    width: 12px;
    height: 17px;
    position: absolute;
    top: 5px;
    left: 6px;
}
.head-search .shop-box .shop-wrap img{
    width:15px;
    height: 17px;
}
.head-search .shop-box .shop-wrap .num{
    position: absolute;
    top:8px;
    right:3px;
    width: 24px;
    height: 16px;
    background-color: #f00581;
    border-radius: 8px;
    text-align: center;
    line-height: 16px;
    color: #fff;

}



.head-search .search-inner{
    width: 389px;
    margin-top:33px;
    float: right;
    position: relative;
}
.head-search  .search-inner .input-from{
    width: 387px;
    height: 32px;
    border: 1px solid #fa2a83;
    border-radius: 2px;
}
.head-search  .search-inner .input-from input {
    width: 311px;
    height: 28px;
    padding: 2px 12px;
    border: none;
    font-size: 14px;
    line-height: 30px;
    color: #333;
    outline: none;

}
.head-search  .search-inner .input-from .button{
    width: 53px;
    height: 26px;
    padding-top: 8px;
    border-radius: 2px;
    text-align: center;
    position: absolute;
    top:0;
    right: 0;
    background-color: #fa2a83;
}
.head-search  .search-inner .input-from .button span img{
    width: 22px;
    height: 22px;
}
/* mian-nav部分 */
.header .mian-nav{
    width: 100%;
    height: 43px;
}
.header .mian-nav .mian{
    width: 1000px;
    height: 43px;
    margin: 0 auto;
}
.header .mian-nav .mian .sps{
    width: 156px;
    height: 43px;
    float: left;
    background-color: #fa2a83;
    margin-right: 20px;
}
.header .mian-nav .mian .sps a{
    display: inline-block;
    width: 136px;
    line-height: 43px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding: 0 10px;
}
.header .mian-nav .mian .sps a img{
    margin-right: 6px;
    margin-top: -3px;
    vertical-align: middle;
}
.header .mian-nav .mian  ul li{
      float: left;
      padding: 0 10px;
      text-align: center;
}
.header .mian-nav .mian  ul li a{
    line-height: 43px;
    font-size: 16px;
    color: #333;
}
.header .mian-nav .mian  ul li a.active{
    color: #f00581;
    font-weight: 700;
}
.header .mian-nav .mian  ul li .vipFont{
    display: inline-block;
    width: 5px;
    height: 5px;
    position: relative;
    top:-5px;
    border: 1px solid #333;
    border-top:none; 
    border-left: none;
    transform: rotate(45deg);
}


</style>